<style lang="less" scoped>
  @import './list.less';
</style>

<template>
  <div class="page container list">
    <div class="list-topic">
      <div class="list-topic-thumb">
        <img src="~/assets/images/banner.png" alt="">
      </div>

      <dl class="list-topic-main">
        <dt class="list-topic-head">
          <v-flex initial>
            <v-flex-item class="list-topic-title">
              资讯
            </v-flex-item>

            <v-flex-item>
              <a-button
                ghost
                size="small"
                type="primary"
              >
                <v-icon type="chat" /> 提交
              </a-button>
            </v-flex-item>
          </v-flex>
        </dt>

        <dd
          class="list-topic-body"
          :class="{ 'list-topic-body__opened': topicOpened }"
        >
          <span
            ref="topicText"
            class="list-topic-text"
          >
            资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性，它必须被消费者利用。并且“提供－使用（阅读或利用）－反馈”之间能够形成一个长期稳定的CS链，具有这些特点才可以称之这些特点才可以称资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性，它必须被消费者利用。并且“提供－使用（阅读或利用）－反馈”之间能够形成一个长期稳定的CS链，具有这些特点才可以称之这些特点才可以资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性，它必须被消费者利用。并且“提供－使用（阅读或利用）－反馈”之间能够形成一个长期稳定的CS链，具有这些特点才可以称之这些特点才可以称…
          </span>

          <span
            class="list-topic-btn"
            @click="onToggleTopicText"
          >
            <v-icon :type="`triangle-${topicOpened ? 'up' : 'down'}`" />
          </span>
        </dd>
      </dl>
    </div>

    <div class="list-head">
      <v-menu
        :selected-key="selectedKey"
        :data-source="[
          { path: '/list', name: '最热' },
          { path: '/list?a', name: '最新' },
        ]"
      />
    </div>

    <div class="list-body">
      <v-list-item
        v-for="item in list"
        :key="item.id"
        :data-source="item"
      />
    </div>

    <!-- pagination -->
    <div class="list-foot">
      <a-pagination
        v-model="current"
        show-less-items
        size="small"
        :total="500"
      />
    </div>
  </div>
</template>

<script>
import Icon from '~/components/icon'
import Menu from '~/components/menu'
import Flex from '~/components/flex'
import FlexItem from '~/components/flex/flex-item'
import ListItem from '~/components/list-item'

const thumb = require('~/assets/images/default.png')
const tags = [
  '腊月',
  '初八',
  '大年三十',
  '牛肉粉丝汤',
]

export default {
  components: {
    'v-icon': Icon,
    'v-menu': Menu,
    'v-flex': Flex,
    'v-flex-item': FlexItem,
    'v-list-item': ListItem,
  },

  data () {
    return {
      current: 1,
      topicOpened: false,
      list: [
        { id: '0', thumb, tags, title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '1', tags, title: '7天完成，颜色还有不足' },
        { id: '2', thumb, tags, title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '3', tags, title: '7天完成，颜色还有不足' },
        { id: '4', thumb, tags, title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '5', tags, title: '7天完成，颜色还有不足' },
        { id: '6', thumb, tags, title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '7', tags, title: '7天完成，颜色还有不足' },
        { id: '8', thumb, tags, title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '9', tags, title: '7天完成，颜色还有不足' },
        { id: '10', thumb, tags, title: '北京小伙用AI修复100年前的京城老视频爆火网络' },
        { id: '11', tags, title: '7天完成，颜色还有不足' },
      ],
    }
  },

  computed: {
    selectedKey () {
      return this.$route.fullPath
    },
  },

  mounted () {
    const $text = this.$refs.topicText

    if ($text.offsetHeight > 50) { // 超出两行文本
      // $text.innerHTML = `${$text.innerHTML.substring(0, 125)}...`
      $text.nextElementSibling.style.display = 'block'
    }
  },

  methods: {
    onToggleTopicText () {
      this.topicOpened = !this.topicOpened
    },
  },
}
</script>
